<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript">
        function searchBook(page, size) {
            $("#search-form").attr("action", "/index?page="+page+"&size="+size);
            $("#search-form").submit();
        }
    </script>
</head>
<body>
<h1 class="text-center pt-3 pb-2">计算机图书商城</h1>

<div class="container">
    <div class="row">
        <form method="post" class="form-inline" role="form" id="search-form">
            <div class="form-group">
                <label>图书名称：</label>
                <input type="text" name="name" value="${name}" class="form-control form-control-sm" style="width:100px">
            </div>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <div class="form-group">
                <label>出版社：</label>
                <select class="form-control form-control-sm" name="pub">
                    <option value="0">全部</option>
                    <c:forEach items="${publishers}" var="p">
                        <option value="${p.publisherId}" ${pub==p.publisherId?"selected":""}>${p.publisherName}</option>
                    </c:forEach>
                </select>
            </div>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <div class="form-group">
                <label>图书分类：</label>
                <c:forEach items="${categories}" var="c" varStatus="s">
                    <c:set var="status" value=""/>

                    <c:forEach items="${cate}" var="t">
                        <c:if test="${c.categoryId == t}">
                            <c:set var="status" value="checked"/>
                        </c:if>
                    </c:forEach>

                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="checkbox-${s.index}"
                               name="cate" value="${c.categoryId}" ${status}>
                        <label class="custom-control-label" for="checkbox-${s.index}">${c.categoryName}</label>
                    </div>
                    &nbsp;&nbsp;
                </c:forEach>
            </div>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <div class="form-group">
                <button type="button" onclick="searchBook(1, ${bookPage.pageSize})" class="btn btn-sm btn-outline-primary">查询</button>
            </div>
        </form>
    </div>

    <hr>
    <div class="row">
        <c:forEach items="${bookPage.bookList}" var="b">
            <div class="col-sm-3 col-md-3">
                <div class="thumbnail">
                    <img src="http://localhost/images/${b.image}" alt="通用的占位符缩略图"/>
                </div>
                <div class="caption text-center">
                    <h5>${b.bookName}</h5>
                </div>
            </div>
        </c:forEach>
    </div>

    <nav class="pb-5 pt-3">
        <ul class="pagination justify-content-center">
            <c:if test="${bookPage.pageNum == 1}">
                <li class="page-item disabled"><a class="page-link" href="#">首页</a></li>
            </c:if>
            <c:if test="${bookPage.pageNum > 1}">
                <li class="page-item"><a class="page-link" onclick="searchBook(1, ${bookPage.pageSize})" href="javascript:void(0);">首页</a></li>
            </c:if>

            <c:forEach begin="1" end="${bookPage.pageCount}" var="i">
                <c:if test="${bookPage.pageNum == i}">
                    <li class="page-item active"><a class="page-link" href="#">${i}</a></li>
                </c:if>
                <c:if test="${bookPage.pageNum != i}">
                    <li class="page-item"><a class="page-link" onclick="searchBook(${i}, ${bookPage.pageSize})" href="javascript:void(0);">${i}</a></li>
                </c:if>
            </c:forEach>

            <c:if test="${bookPage.pageNum == bookPage.pageCount}">
                <li class="page-item disabled"><a class="page-link" href="#">末页</a></li>
            </c:if>
            <c:if test="${bookPage.pageNum < bookPage.pageCount}">
                <li class="page-item"><a class="page-link" onclick="searchBook(${bookPage.pageCount}, ${bookPage.pageSize})" href="javascript:void(0);">末页</a></li>
            </c:if>
        </ul>
    </nav>
</div>
</body>
</html>
